<template>
  <card class="insure-card" title="维修记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #eventStatus="{ record }">
        {{ EEventStatus[record.eventStatus] }}
      </template>
      <template #orderCodeLike="{ record }">
        <template v-if="record.orderCode && record.giveStaffName">
          <a-link type="link" @click="() => onLink(record)">{{ record.orderCode }}</a-link>
          <div>交车人：{{ record.giveStaffName }}</div>
        </template>
        <template v-else>-</template>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getRepairList } from '@/api/asset/repair'

  const props = defineProps<{
    orderId: number
  }>()
  const queryParam = reactive({
    orderId: props.orderId,
    orderType: 3,
  })
  const table = useTable({
    queryParam,
    columns: [
      { title: '维修单号', dataIndex: 'repairNo', fixed: 'left' },
      { title: '车牌号', dataIndex: 'licenseNo' },
      { title: '归属门店', dataIndex: 'siteName' },
      { title: '修理厂', dataIndex: 'repairShop' },
      {
        title: '入厂时间',
        width: 180,
        dataIndex: 'arrivalTime',
        sortable: { sortDirections: ['ascend', 'descend'] },
      },
      {
        title: '出厂时间',
        width: 180,
        dataIndex: 'leaveTime',
        sortable: { sortDirections: ['ascend', 'descend'] },
      },
      { title: '维修项目', dataIndex: 'repairItemNames' },
      { title: '维修费用合计(元)', dataIndex: 'repairAmount', width: 140 },
      { title: '维修状态', dataIndex: 'statusStr' },
      { title: '负责人', dataIndex: 'undertaker', fixed: 'right' },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, getRepairList)

  onMounted(() => {
    loadData()
  })
</script>
<style scoped lang="less"></style>
